<%@ page import="beans.StuInfoBean" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ManagerFrame</title>
    <link rel="shortcut icon" href="./favicon.png">
    <link rel="stylesheet" type="text/css" href="pageStyle.css">
    <style>
        .content {
            background-color: inherit;
        }
        .content-right {
            display: inline;
            position: absolute;
            right: 10%;
        }

        .content-table {
            display: block;
            position: relative;
            width: 100%;
            height: 90%;
            overflow: auto;
        }

        .content-info-table {
            display: none;
            position: relative;
            width: 100%;
            height: 100%;
        }
        .add-info-table {
            text-align: center;
            border: none;
            margin: 4% auto;
            border-spacing: 0;
        }
        .add-info-table td,
        .add-info-table th {
            border: 1px solid silver;
            padding: 3px 15px 3px 15px;
            border-radius: 7px;
        }
        .add-info-table input[type="text"] {
            background-color: inherit;
            width: 200px;
            border: none;
            outline: none;
        }

        .info-table td span {
            color: #ff2222e8;
            cursor: pointer;
        }
    </style>

</head>
<body>
<div class="back">
    <div class="content">
        <label for="searchType">
            <select id="searchType" name="searchType">
                <option value="search_college">按学院查找：</option>
                <option value="search_major">按专业查找：</option>
                <option value="search_class">按班级查找：</option>
                <option value="search_username">按姓名查找：</option>
                <option value="search_id">按学号查找：</option>
            </select>
        </label>
        <label for="search"><input type="text" id="search" name="search"></label>
        <input type="button" id="btn_search" name="btn_search" value="查询">
        <input type="button" id="btn_searchAll" name="btn_searchAll" value="查询全部">
        <div class="content-right">
            <input type="button" id="btn_add" name="btn_add" value="添加">
            <input type="button" id="btn_export" name="btn_export" disabled value="导出">
        </div>
    </div>

        <div class="content-table" id="div_table">
            <%
                if (session.getAttribute("stuList") != null) {
                    List<StuInfoBean> list = (List<StuInfoBean>) session.getAttribute("stuList");
                    out.print("<table class='info-table' id='info_table'><tr>" +
                              "<th>学号</th><th>姓名</th><th>性别</th><th>学校</th><th>电话</th><th>籍贯</th>" +
                              "<th>学院</th><th>专业</th><th>班级</th><th colspan='2'>操作</th></tr>");
                    for (StuInfoBean stu : list) {
                        out.print("<tr>");
                        out.print("<td id='id_" + stu.getId() + "'>" + stu.getId() + "</td>");
                        out.print("<td id='username_" + stu.getId() + "'>" + stu.getUsername() + "</td>");
                        out.print("<td id='gender_" + stu.getId() + "'>" + stu.getGender() + "</td>");
                        out.print("<td id='school_" + stu.getId() + "'>" + stu.getSchool() + "</td>");
                        out.print("<td id='tel_" + stu.getId() + "'>" + stu.getTel() + "</td>");
                        out.print("<td id='origin_" + stu.getId() + "'>" + stu.getOrigin() + "</td>");
                        out.print("<td id='college_" + stu.getId() + "'>" + stu.getCollege() + "</td>");
                        out.print("<td id='major_" + stu.getId() + "'>" + stu.getMajor() + "</td>");
                        out.print("<td id='ofClass_" + stu.getId() + "'>" + stu.getOfClass() + "</td>");
                        out.print("<td><span id='" + stu.getId() + "'onclick='deleteById(this.id)'>删除</span></td>");
                        out.print("<td><span id='_" + stu.getId() + "'onclick='openUpdateTable(this.id)'>修改</span></td>");
                        out.print("</tr>");
                    }
                    out.print("</table>");
                } else if (session.getAttribute("stuInfo") != null) {
                    StuInfoBean stu = (StuInfoBean) session.getAttribute("stuInfo");
                    out.print("<table class='info-table' id='info_table'><tr>" +
                              "<th>学号</th><th>姓名</th><th>性别</th><th>学校</th><th>电话</th><th>籍贯</th>" +
                              "<th>学院</th><th>专业</th><th>班级</th><th colspan='2'>操作</th></tr>");
                    out.print("<tr>");
                    out.print("<td id='id_" + stu.getId() + "'>" + stu.getId() + "</td>");
                    out.print("<td id='username_" + stu.getId() + "'>" + stu.getUsername() + "</td>");
                    out.print("<td id='gender_" + stu.getId() + "'>" + stu.getGender() + "</td>");
                    out.print("<td id='school_" + stu.getId() + "'>" + stu.getSchool() + "</td>");
                    out.print("<td id='tel_" + stu.getId() + "'>" + stu.getTel() + "</td>");
                    out.print("<td id='origin_" + stu.getId() + "'>" + stu.getOrigin() + "</td>");
                    out.print("<td id='college_" + stu.getId() + "'>" + stu.getCollege() + "</td>");
                    out.print("<td id='major_" + stu.getId() + "'>" + stu.getMajor() + "</td>");
                    out.print("<td id='ofClass_" + stu.getId() + "'>" + stu.getOfClass() + "</td>");
                    out.print("<td><span id='" + stu.getId() + "'onclick='deleteById(this.id)'>删除</span></td>");
                    out.print("<td><span id='_" + stu.getId() + "'onclick='openUpdateTable(this.id)'>修改</span></td>");
                    out.print("</tr></table>");
                }
            %>
        </div>

        <div class="content-info-table" id="div_info_table">
            <table class="add-info-table">
                <tr>
                    <td>学号：</td>
                    <td>
                        <label>
                            <input type="text" id="table_id" name="table_id" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')">
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>姓名：</td>
                    <td>
                        <label><input type="text" id="table_name" name="table_name"></label>
                    </td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <label><input name="table_gender" id="table_gender_male" type="radio" value="男"/>男</label>
                        <label><input name="table_gender" id="table_gender_female" type="radio" value="女"/>女</label>
                    </td>
                </tr>
                <tr>
                    <td>照片：</td>
                    <td><img src="" width="120px" height="120px" alt="施工中"></td>
                </tr>
                <tr>
                    <td>学校：</td>
                    <td>
                        <label><input type="text" id="table_school" name="table_school"></label>
                    </td>
                </tr>
                <tr>
                    <td>学院：</td>
                    <td>
                        <label><input type="text" id="table_college" name="table_college"></label>
                    </td>
                </tr>
                <tr>
                    <td>专业：</td>
                    <td>
                        <label><input type="text" id="table_major" name="table_major"></label>
                    </td>
                </tr>
                <tr>
                    <td>班级：</td>
                    <td>
                        <label><input type="text" id="table_class" name="table_class"></label>
                    </td>
                </tr>
                <tr>
                    <td>电话：</td>
                    <td>
                        <label><input type="text" id="table_tel" name="table_tel"></label>
                    </td>
                </tr>
                <tr>
                    <td>籍贯：</td>
                    <td>
                        <label><input type="text" id="table_origin" name="table_origin"></label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" id="btn_close" name="btn_close" value="关闭">
                        <input type="button" id="btn_submit" name="btn_submit" value="提交">
                        <input type="button" id="btn_update" name="btn_update" value="提交">
                    </td>
                </tr>
            </table>
        </div>

    <script type="text/javascript" src="manager.js"></script>
    <script>
        let btn_add = document.getElementById("btn_add");
        btn_add.onclick = function () {
            document.getElementById("table_gender_male").checked = true;
            info_table_show();
            clear_info_table();
            btn_update_hidden();
            document.getElementById("table_id").readOnly = false;
        }

        let btn_close = document.getElementById("btn_close");
        btn_close.onclick = info_table_hidden;

        let btn_submit = document.getElementById("btn_submit");
        btn_submit.addEventListener('click', insertInfo);

        let btn_update = document.getElementById("btn_update");
        btn_update.onclick = updateInfo;

        let btn_search = document.getElementById("btn_search");
        btn_search.addEventListener("click", function () {
            let searchType_str = document.getElementById("searchType").value;
            let search = document.getElementById("search").value;
            searchInfo(searchType_str, search);
        })

        let btn_searchAll = document.getElementById("btn_searchAll");
        btn_searchAll.addEventListener("click", function () {
            searchInfo("searchAll", "none");
        })

        let btn_export = document.getElementById("btn_export");
        btn_export.onclick = exportExcel;

        setInterval("clock()",100);
    </script>
</div>
</body>
</html>
